import React from 'react';

/**
 * 带图标的分区标题组件
 * @param {Object} props - 组件属性
 * @param {ReactNode} props.icon - 图标组件
 * @param {string} props.title - 标题文本
 * @param {number} [props.level=2] - 标题级别（1-6）
 * @param {Object} [props.style={}] - 自定义样式
 */
const SectionHeader = ({ icon, title, level = 2, style = {} }) => {
  const HeadingTag = `h${level}`;
  
  return (
    <HeadingTag 
      style={{ 
        borderBottom: "1px solid #ccc",
        ...style
      }}
    >
      {icon && React.cloneElement(icon, { style: { marginRight: "8px", ...icon.props.style } })}
      {title}
    </HeadingTag>
  );
};

export default SectionHeader;